<template>
  <div>
    <div class="banner-wrap">
      <el-carousel height="250px">
        <el-carousel-item v-for="item in banners" :key="item.id">
          <el-image
            style="height: 250px"
            :src="item.pic"
            fit="cover"
          ></el-image>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="recommendation">
      <span>个性推荐</span>
      <!-- 个性推荐列表 -->
      <div class="mid-songlist-list">
        <ul>
          <li v-for="i in songlist" :key="i.id">
            <img :src="i.picUrl" draggable="false" />
            <p>{{ i.name }}</p>
            <p class="songlist_author">▷ {{ i.listencnt | moneyFormat }}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      banners: [],
      songlist: []
    }
  },
  mounted() {
    this.getBanner()
    this.getSonglist()
  },
  methods: {
    getBanner: async function() {
      const banners = await this.$http.get(
        'http://172.28.34.35:5500/api/getBanner.php'
      )
      this.banners = banners.data
    },
    getSonglist: async function() {
      const songlist = await this.$http.get('api/getSonglist.php')
      // console.log(songlist)
      this.songlist = songlist.data
    }
  },
  filters: {
    moneyFormat: function(arg) {
      if (arg.toString().length >= 13) {
        // return arg/1000000000000+"万亿"
        const moneys = arg / 1000000000000
        const realVal = parseFloat(moneys).toFixed(2)
        return realVal + '万亿'
      } else if (arg.toString().length >= 9) {
        const moneys = arg / 100000000
        const realVal = parseFloat(moneys).toFixed(2)
        return realVal + '亿'
      } else if (arg.toString().length >= 4) {
        const moneys = arg / 10000
        const realVal = parseFloat(moneys).toFixed(2)
        return realVal + '万'
      }
    }
  }
}
</script>

<style lang="less" scoped>
.banner-wrap {
  margin: 0 auto;
  width: 600px;
  border-radius: 10px;
  overflow: hidden;
}
.recommendation {
  margin-top: 20px;
  span {
    color: #303e65;
    font-size: 20px;
    font-weight: 900;
  }

  .mid-songlist-list {
    ul {
      display: flex;
      flex-wrap: wrap;
      overflow: hidden;
      justify-content: space-around;
      // justify-content: space-between;
    }

    li {
      margin: 0 20px;
      margin-top: 20px;
      padding: 10px;
      width: 110px;
      cursor: pointer;
      font-size: 14px;
      border: 1px rgba(68, 62, 62, 10%) solid;
      border-radius: 5px;

      img {
        width: 110px;
        border-radius: 10px;
      }

      p {
        margin-top: 10px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; //需要控制的文本行数
        overflow: hidden;
      }

      .songlist_author {
        font-size: 12px;
        color: #8394b9;
      }
    }
  }
}
</style>
